<script lang="ts" setup>
import PictureGroup from "./components/picture-group/index.vue";
import PictureGroupSetting from "./components/picture-group/setting.vue";
import Search from "./components/search/index.vue";
import SearchSetting from "./components/search/setting.vue";
import ModuleList from "./components/module-list/index.vue";
import Base from "./components/base/index.vue";
import SubjectBanner from "./components/subject-banner/index.vue";
import SubjectBannerSetting from "./components/subject-banner/setting.vue";
import Action from "./components/action/index.vue";
import CategoryList from "./components/category-list/index.vue";
import CategoryListSetting from "./components/category-list/setting.vue";
import Carousel from "./components/carousel/index.vue";
import CarouselSetting from "./components/carousel/setting.vue";
import Subject from "./components/subject/index.vue";
import SubjectSetting from "./components/subject/setting.vue";
import { useVariableStore } from "@/stores/variable";

const variableStore = useVariableStore();
</script>

<template>
  <umrp-container direction="vertical" height="100%" bg-color="#f2f2f2">
    <umrp-row>
      <umrp-col :span="16" style="height: calc(100vh - 63px); overflow-y: scroll">
        <umrp-container align="center" padding="16px 0" bg-color="gray">
          <umrp-container :width="375">
            <Action setting="SubjectBanner">
              <SubjectBanner></SubjectBanner>
            </Action>
            <Action setting="search">
              <Search></Search>
            </Action>
            <Action setting="categoryList">
              <CategoryList></CategoryList>
            </Action>
            <Action setting="carousel">
              <Carousel></Carousel>
            </Action>
            <Action setting="subject">
              <Subject></Subject>
            </Action>
            <Action setting="pictureGroup">
              <PictureGroup></PictureGroup>
            </Action>
          </umrp-container>
        </umrp-container>
      </umrp-col>
      <umrp-col :span="8">
        <umrp-row style="background-color: #fff;">
          <umrp-col :span="4" style="border-right: 1px solid var(--border-color)">
            <umrp-menu :gap="16" :selected-keys="[variableStore.variable.setting]">
              <umrp-menu-item key="base" direction="vertical" v-state:click="{ setting: 'base' }">基础设置</umrp-menu-item>
              <umrp-menu-item key="subjectBanner" direction="vertical"
                v-state:click="{ setting: 'subjectBanner' }">顶部轮播</umrp-menu-item>
              <umrp-menu-item key="search" direction="vertical"
                v-state:click="{ setting: 'search' }">类目搜索</umrp-menu-item>
              <umrp-menu-item key="categoryList" direction="vertical"
                v-state:click="{ setting: 'categoryList' }">热门品类</umrp-menu-item>
              <umrp-menu-item key="carousel" direction="vertical"
                v-state:click="{ setting: 'carousel' }">广告轮播</umrp-menu-item>
              <umrp-menu-item key="subject" direction="vertical"
                v-state:click="{ setting: 'subject' }">活动主题</umrp-menu-item>
              <umrp-menu-item key="pictureGroup" direction="vertical"
                v-state:click="{ setting: 'pictureGroup' }">活动详情</umrp-menu-item>
              <umrp-menu-item key="countdown" direction="vertical"
                v-state:click="{ setting: 'countdown' }">限时活动</umrp-menu-item>
            </umrp-menu>
          </umrp-col>
          <umrp-col :span="20" style="height: calc(100vh - 63px)">
            <umrp-container height="100%">
              <div style="flex: 1">
                <umrp-container padding="16px">
                  <Base v-visible="{ setting: 'base' }">
                  </Base>
                  <PictureGroupSetting v-visible="{ setting: 'pictureGroup' }"></PictureGroupSetting>
                  <SearchSetting v-visible="{ setting: 'search' }"></SearchSetting>
                  <SubjectBannerSetting v-visible="{ setting: 'subjectBanner' }"></SubjectBannerSetting>
                  <CategoryListSetting v-visible="{ setting: 'categoryList' }"></CategoryListSetting>
                  <CarouselSetting v-visible="{ setting: 'carousel' }"></CarouselSetting>
                  <SubjectSetting v-visible="{ setting: 'subject' }"></SubjectSetting>
                  <ModuleList></ModuleList>
                </umrp-container>
              </div>
              <umrp-container direction="horizontal" :gap="16" padding="16px" style="box-shadow: 3px -3px 6px #ccc">
                <umrp-button type="primary" style="flex: 1" outline v-link:Activity>取消</umrp-button>
                <umrp-button type="primary" style="flex: 1">保存</umrp-button>
              </umrp-container>
            </umrp-container>
          </umrp-col>
        </umrp-row>
      </umrp-col>
    </umrp-row>
  </umrp-container>
</template>
